<template>
	<view>
		<view class="tabContent">
			<!-- 瀑布流 -->
			<custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" :column="column" :columnSpace="1.5"
				@wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
				<view class="item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">

					<!-- 底部（图片以下部分） -->
					<view class="bottomBox">
						<!-- 标题 -->
						<view class="title">{{item.title}}</view>
						<!-- 底部大盒子 -->
						<view class="littleBox">
							<!-- 用户信息框 -->
							<view class="user">
								<!-- 头像 -->
								<view class="avatarUrl">
									<image :src="item.avatarUrl" mode="aspectFill"></image>
								</view>
								<!-- 用户名 -->
								<text class="nickName">{{item.nickName}}</text>
							</view>
							<!-- 点击量和喜欢数量 -->
							<view class="detailsBox">
								<!-- 点击量 -->
								<view class="hits">
									<view>
										<image
											src="cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/hitsAndLikes/hits.svg">
										</image>
									</view>
									<text class="hitsNum">{{common.getLikes(item.hits)}}</text>
								</view>
								<!-- 发布时间 -->
								<view class="postTime">{{common.timesFun(item.postTime)}}</view>
							</view>
							<!-- 价格 -->
							<view class="price" v-if="item.price">
								<!-- 占位标签 -->
								<text> </text>
								<text>{{item.price}}元</text>
							</view>
						</view>
					</view>

				</view>
			</custom-waterfalls-flow>
		</view>
	</view>
</template>

<!-- 引用wxs对时间戳和点击量做过滤 -->
<script module="common" lang="wxs" src="@/wxcomponents/wxs/common.wxs"></script>

<script>
	export default {
		name: 'tabBottom',
		props: {
			// 当前标题栏目
			currentTitle: {
				type: String,
				default: '话题'
			},
			// 当前栏目的索引值
			currentIndex:{
				type: Number,
				default: null
			},
			// 当前栏目的数据
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			loaded() {
				// console.log('加载完成')
			},
			wapperClick(item) {
				console.log('单项点击事件', item)
				uni.navigateTo({
					url: `/pages/details/details?type=${this.currentIndex}&id=${item._id}`
				});
			},
			imageClick(item) {
				console.log('图片点击事件', item)
				this.wapperClick(item)
			},
			// 重新刷新数据
			reset() {
				// console.log('刷新数据')
				// console.log("已经拿到父传子的list", this.list);
				this.$refs.waterfallsFlowRef.refresh();
			},
		}
	}
</script>

<style scoped lang="scss">
	.tabContent {
		// 初始化高度，后期可删减
		// height: 2000rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		border-radius: 35rpx 35rpx 0 0;
		background-color: white;

		.bottomBox {
			display: flex;
			flex-direction: column;
			// background-color: aquamarine;

			.title {
				font-weight: bold;
				text-indent: 15rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.littleBox {
				display: flex;
				flex-direction: column;
				margin-bottom: 15rpx;
				justify-content: space-between;
				padding: 10rpx;

				.user {
					display: flex;
					// background-color: blueviolet;
					margin-top: 10rpx;

					.avatarUrl {
						// background-color: bisque;
						width: 50rpx;
						height: 50rpx;
						overflow: hidden;
						border-radius: 50%;
						margin: 0 5rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.nickName {
						color: #6f6f6f;
						width: 250rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 5rpx;
					}
				}

				.detailsBox {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					justify-content: space-between;

					.postTime {
						color: #8a8a8a;
					}

					.hits {
						display: flex;
						flex-direction: row;
						margin-top: 5rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-top: 8rpx;
							margin-right: 8rpx;
						}

						.hitsNum {
							color: #6f6f6f;
							margin-top: 5rpx;
						}
					}
				}
				.price{
					color: #aa0000;
					font-size: 30rpx;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
